<template>
    <a-row>
        <a-row class='mytitle'>
            <router-link :to='{name:"index"}'><a-icon type="arrow-left" style="color:var(--themeColor);margin-right:0.5em" /></router-link>
            {{$t('Operation-log')}}
        </a-row>
        <a-row style="margin:1em">
            <a-card hoverable>
                
                <a-table class="tabstyle" :columns="columns" :dataSource="logdata" size="small" rowKey="id" 
                         :pagination='pagination' :locale="defaultSetting">
                    <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
                        <a-input v-ant-ref="c => searchInput = c" :placeholder="`Search ${column.dataIndex}`" :value="selectedKeys[0]" @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])" @pressEnter="() => handleSearch(selectedKeys, confirm)" style="width: 188px; margin-bottom: 8px; display: block;" />
                        <a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)" icon="search" size="small" style="width: 90px; margin-right: 8px">Search</a-button>
                        <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px">Reset</a-button>
                    </div>
                    <a-icon slot="filterIcon" slot-scope="filtered" type='search' :style="{ color: filtered ? '#108ee9' : undefined }" />
                    <template slot="customRender" slot-scope="text">
                        <span v-if='searchText'>
                            <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
                                <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</mark>
                                <template v-else>{{fragment}}</template>
                            </template>
                        </span>
                        <template v-else>{{text}}</template>
                    </template>
                </a-table>
            </a-card>
        </a-row>
    </a-row>
</template>
<script>
import EmptyData from '@/components/common/EmptyData'
import request from '@/request/request'

export default {
    name:'',
    components: { EmptyData },
    data(){
        return{
            // columns,
            searchText: '',
            searchInput: null,
            columns:[
                {
                    title:this.$t('User')+this.$t('Name'),dataIndex:'user',key:'user',
                    sorter: (a, b) => a.user.length - b.user.length,
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.user.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        }, 0);
                        }
                    },
                },
                {title:this.$t('Event-description'),dataIndex:'params',key:'params'},
                {
                    title:this.$t('Login-address'),dataIndex:'addr',key:'addr',
                    sorter: (a, b) => a.addr.length - b.addr.length,
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.addr.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        }, 0);
                        }
                    },
                },
                {
                    title:this.$t('Time'),dataIndex:'time',key:'time',
                    sorter: (a, b) => a.time.length - b.time.length,
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.time.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        }, 0);
                        }
                    },
                }
            ],
            selectedRowKeys:[],
            form:this.$form.createForm(this),
            pagination:{
                defaultPageSize:15,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger:true,
                pageSizeOptions: [ '15', '20','30'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            logdata:[],
            defaultSetting: {emptyText:<EmptyData />}
        }
    },
    computed:{
        getlanguage(){
            return this.$store.state.language
        }
    },
    watch: {
        getlanguage(val){  //监听语言切换，切换data组件内的多语言
            this.columns = [
                {
                    title:this.$t('User')+this.$t('Name'),dataIndex:'user',key:'user',
                    sorter: (a, b) => a.user.length - b.user.length,
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.user.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        }, 0);
                        }
                    },
                },
                {title:this.$t('Event-description'),dataIndex:'params',key:'params'},
                {
                    title:this.$t('Login-address'),dataIndex:'addr',key:'addr',
                    sorter: (a, b) => a.addr.length - b.addr.length,
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.addr.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        }, 0);
                        }
                    },
                },
                {
                    title:this.$t('Time'),dataIndex:'time',key:'time',
                    sorter: (a, b) => a.time.length - b.time.length,
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.time.toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        }, 0);
                        }
                    },
                }
            ]
        }
    },
    methods:{
        getdata(){
            request('get', 'ops/conf/db/event').then(res=>{
                this.logdata = res.data
                for(let i=0;i<res.data.length;i++){
                    this.model(res.data[i].event_id)
                    this.logdata[i].params = this.asFormat(localStorage.getItem('themodel'), this.logdata[i].params)
                } 
            })
        },
        handleSearch(selectedKeys, confirm) {
            confirm()
            this.searchText = selectedKeys[0]
        },

        handleReset(clearFilters) {
            clearFilters()
            this.searchText = ''
        },
    },
    mounted(){
        this.getdata()
    }
}
</script>
